<template>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名" prop="name">
            <el-input v-model="form.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" clearable></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="roles">
            <el-checkbox-group v-model="form.roles" multiple clearable>
                <el-checkbox v-for="(role,index) in allowedFilters.roles" :label="index" :key="index">{{role}}
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="注册时间">
            <el-col :span="11">
                <el-form-item prop="created_at_from">
                    <el-date-picker align="right"
                                    type="date" placeholder="从" v-model="form.created_at_from"
                                    style="width: 100%;" clearable></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-form-item prop="created_at_to">
                    <el-date-picker align="right"
                                    type="date" placeholder="至" v-model="form.created_at_to"
                                    style="width: 100%;" clearable></el-date-picker>
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="已删除" prop="trashed">
            <el-radio-group v-model="form.trashed" size="medium">

                <el-radio-button v-for="(trashed_type,key) in allowedFilters.trashed_types" :label="key"
                                 :key="key">{{trashed_type}}
                </el-radio-button>

            </el-radio-group>
        </el-form-item>
        <el-form-item>

            <el-button type="primary" @click="onSubmit">筛选</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>

    export default {
        data() {
            return {
                form: {
                    name: null,
                    email: null,
                    roles: [],
                    created_at_from: null,
                    created_at_to: null,
                    trashed: 0,
                }, allowedFilters: {
                    roles: [],
                    trashed_types: []
                },
            }
        },
        computed: {
            tags() {
                let tags = [];
                if (this.form.name) {
                    tags.push('用户名包含 ' + this.form.name);
                }
                if (this.form.email) {
                    tags.push('邮箱包含 ' + this.form.email);
                }
                if (this.form.roles) {
                    for (let role of this.form.roles) {
                        tags.push('角色：' + this.allowedFilters.roles[role]);
                    }
                }
                if (this.form.trashed) {
                    tags.push(this.allowedFilters.trashed_types[this.form.trashed]);
                }
                if (this.form.created_at_from || this.form.created_at_to) {
                    if (this.form.created_at_from && this.form.created_at_to) {
                        tags.push(this.form.created_at_from + ' < 注册时间 < ' + this.form.created_at_to);
                    } else if (this.form.created_at_from) {
                        tags.push(this.form.created_at_from + ' < 注册时间');
                    } else if (this.form.created_at_to) {
                        tags.push('注册时间 < ' + this.form.created_at_to);
                    }
                }
                return tags;
            }
        },
        methods: {
            onSubmit() {
                this.$emit('complete', this.form, this.tags);
            },
            getFilters() {
                axios.get('users/filters').then((response) => {
                    this.allowedFilters = response.data;
                })
            }, resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        }, created() {
            this.getFilters();
        }
    }
</script>

<style scoped>

</style>